<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>
    <meta name="description" content=""/>
    <link href="https://fonts.googleapis.com/css?family=Arimo:400,600,700" rel="stylesheet">
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="/static/images/favicon.png">
    <link href="/static/styles/main.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.form.min.js"></script>
  </head>
  <body id="top">
    <div class="page">
      <header>
        <div class="pp-header">
          <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container"><a href="/add_image"><img src="/static/images/favicon.png"></a><a class="navbar-brand" href="#">My Photo Perfect
</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
              <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <ul class="navbar-nav ml-auto">
                  <li class="nav-item active"><a class="nav-link" href="#">主页</a>
                  </li>
                  <li class="nav-item"><a class="nav-link" href="/add_image">添加照片</a>
                  </li>
                  <li class="nav-item"><a class="nav-link" href="contact.html">新建相册</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </header>
      <div class="page-content">
        <div class="container">
<div class="container pp-section">
  <div class="row">
    <div class="col-md-9 col-sm-12 px-0">
      <h1 class="h3"> I'm zhu</h1>
    </div>
  </div>
</div>
<div class="container px-0 py-4">
  <div class="pp-category-filter">
    <div class="row">
      <div class="col-sm-12">
          <a class="btn btn-primary pp-filter-button" href="#" data-filter="all">全部</a>
          <a class="btn btn-outline-primary pp-filter-button" href="#" data-filter="people">分类1</a>
          <a class="btn btn-outline-primary pp-filter-button" href="#" data-filter="nature">2</a>
          <a class="btn btn-outline-primary pp-filter-button" href="#" data-filter="computer">3</a>
          <a class="btn btn-outline-primary pp-filter-button" href="#" data-filter="food">4</a>
      </div>
    </div>
  </div>
</div>
<div class="container px-0">
  <div class="pp-gallery">
    <div class="card-columns">
        {% for image in  images %}
        <div class="card" data-groups="[&quot;nature&quot;]"><a href="/details/{{ image.id }}">
          <figure class="pp-effect"><img class="img-fluid" src="{{ image.photo_path }}" alt="Nature"/>
            <figcaption>
              <div class="h4">{{ image.photo_dig_title }}</div>
              <p>{{ image.create_time}}</p>
            </figcaption>
          </figure></a></div>
        {% endfor %}
    </div>
  </div>
</div>
<div class="pp-section"></div></div>
      </div>
      <footer class="pp-footer">
        <div class="container py-5">
          <div class="row text-center">
            <div class="col-md-12"><a class="pp-facebook btn btn-link" href="#"><i class="fa fa-facebook fa-2x " aria-hidden="true"></i></a><a class="pp-twitter btn btn-link " href="#"><i class="fa fa-twitter fa-2x " aria-hidden="true"></i></a><a class="pp-google-plus btn btn-link" href="#"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i></a><a class="pp-instagram btn btn-link" href="#"><i class="fa fa-instagram fa-2x " aria-hidden="true"></i></a></div>
            <div class="col-md-12">
              <p class="mt-3">Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://www.weitezhu.cool:8800">hhhh</a></p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>
</html>